<template>
    <view class="detail-task-item">
        <view class="item-header">
            <text class="sn-text">配送单号：{{ data.number }}</text>
            <text class="state-text">{{ stateName[state] }}</text>
        </view>
        <address-info-card showPickupAddress :data="data" :state="state"></address-info-card>
        <view class="item-actions" v-if="state != 4">
            <view class="actions-item" @click.stop="showTel">
                <uni-icons type="phone-filled"></uni-icons>
                <text>联系</text>
            </view>
            <view class="actions-item" @click.stop="gotoMap">
                <uni-icons type="paperplane-filled"></uni-icons>
                <text>导航</text>
            </view>
            <view class="btn btn-main-tms" @click.stop="submit">
                <text>{{ stateBtnName[state] }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import addressInfoCard from "@/pages_tms/components/order/address-info-card.vue"
import { toMapAPP } from "@/uni-sub-base/utils/mapUtil"
export default {
    components: {
        addressInfoCard,
    },
    props: {
        state: {
            type: Number,
            default: 0,
        },
        data: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            stateName: ["待分配", "待取货", "待配送", "配送中", "已送达"],
            stateBtnName: ["确认分配", "确认已取货", "开始配送", "确认已送达", "已送达"],
        }
    },
    mounted() {},
    onShow() {},
    methods: {
        showTel() {
            this.$emit("showTel", this.data)
        },
        gotoMap() {
            //#ifdef APP-PLUS
            let lat = 0,
                lng = 0,
                name = ""
            if (this.state == 1) {
                //待取货导航到取货仓库
                lat = this.data.latitude
                lng = this.data.longitude
                name = this.data.repositoryName
            } else if (this.state == 2 || this.state == 3) {
                //待配送和配送中导航到送货门店
                lat = this.data.storeLatitude
                lng = this.data.storeLongitude
                name = this.data.storeLinkName || this.data.storeName
            }
            console.log(lat, lng, name)
            toMapAPP(lat, lng, name)
            // #endif
            // #ifndef APP-PLUS
            this.easyToast("请在app中使用导航功能")
            //#endif
        },
        submit() {
            this.$emit("submit")
        },
    },
}
</script>

<style lang="scss">
.detail-task-item {
    padding: $app-page-padding;
    background: $color-white;
    border-radius: 16rpx;

    .item-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: $app-page-padding;

        .sn-text {
            font-size: $font-size-28;
        }

        .state-text {
            font-size: $font-size-28;
            color: $color-tms-orange-1;
        }
    }

    .item-desc {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: $app-page-padding 0;

        .desc-box {
            margin-right: 20rpx;

            .desc-box-label {
                color: $app-color-text-tip;
            }
        }

        .go-detail {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;

            text {
                color: #898b9d;
            }
        }
    }

    .item-footer {
        display: flex;
        flex-direction: row;

        .item-btn {
            display: flex;
            flex-direction: column;
            padding-right: 15rpx;
            padding-left: 10rpx;
            margin-right: 20rpx;

            .icon-btn-tel {
                color: #0091ff;
                margin-bottom: 10rpx;
            }

            .btn-text {
                font-size: $font-size-28;
            }
        }

        .action-bar {
            flex: 1;
            background: #252c39;
            border-radius: 8rpx;
        }
    }
}

.item-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: $app-page-padding;
    height: 80rpx;

    .actions-item {
        flex: 1;
        border-right: solid 2rpx #e5e9f0;
        margin-right: 20rpx;

        &:nth-child(2) {
            border-right: none;
        }

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;

        text {
            font-size: $font-size-28;
            margin: 0 8rpx;
            color: $app-color-main-tms;
        }
    }

    .btn {
        min-width: 240rpx;
        height: 80rpx;
        border-radius: 100rpx;

        text {
            color: $color-white;
        }
    }
}

.btn-main-tms {
    background: $app-color-main-tms;
}
</style>
